<div class="content-section introduction">
    <div>
        <span class="feature-title">Toast</span>
        <span>Toast is used to display messages in an overlay.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-toast></p-toast>
    <p-toast position="top-left" key="tl"></p-toast>
    <p-toast position="top-center" key="tc"></p-toast>
    <p-toast position="bottom-center" key="bc"></p-toast>

    <p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000">
        <ng-template let-message pTemplate="message">
            <div class="p-flex p-flex-column" style="flex: 1">
                <div class="p-text-center">
                    <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                    <h4>{{message.summary}}</h4>
                    <p>{{message.detail}}</p>
                </div>
                <div class="p-grid p-fluid">
                    <div class="p-col-6">
                        <button type="button" pButton (click)="onConfirm()" label="Yes" class="p-button-success"></button>
                    </div>
                    <div class="p-col-6">
                        <button type="button" pButton (click)="onReject()" label="No" class="p-button-secondary"></button>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-toast>

    <div class="card">
        <h5>Severities</h5>
        <button type="button" pButton pRipple (click)="showSuccess()" label="Success" class="p-button-success"></button>
        <button type="button" pButton pRipple (click)="showInfo()" label="Info" class="p-button-info"></button>
        <button type="button" pButton pRipple (click)="showWarn()" label="Warn" class="p-button-warning"></button>
        <button type="button" pButton pRipple (click)="showError()" label="Error" class="p-button-danger"></button>

        <h5>Positions</h5>
        <button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"></button>
        <button type="button" pButton pRipple (click)="showTopCenter()" label="Top Center" class="p-button-warning"></button>
        <button type="button" pButton pRipple (click)="showBottomCenter()" label="Bottom Center" class="p-button-success"></button>
        
        <h5>Multiple</h5>
        <button type="button" pButton pRipple (click)="showMultiple()" label="Multiple" class="p-button-warning"></button>
        <button type="button" pButton pRipple (click)="showSticky()" label="Sticky"></button>

        <h5>Clear</h5>
        <button type="button" pButton pRipple (click)="clear()" icon="pi pi-times" label="Clear"></button>

        <h5>Template</h5>
        <button type="button" pButton pRipple (click)="showConfirm()" label="Confirm" class="ui-button-warning"></button>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;ToastModule&#125; from 'primeng/toast';
</app-code>

            <h5>Getting Started</h5>
            <p>A single message is specified by the Message interface having the following properties.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>severity</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Severity level of the message, valid values are "success", "info", "warn" and "error".</td>
                        </tr>
                        <tr>
                            <td>summary</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Summary text of the message.</td>
                        </tr>
                        <tr>
                            <td>detail</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Detail text of the message.</td>
                        </tr>
                        <tr>
                            <td>id</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Identifier of the message.</td>
                        </tr>
                        <tr>
                            <td>key</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Key of the message in case message is targeted to a specific toast component.</td>
                        </tr>
                        <tr>
                            <td>life</td>
                            <td>number</td>
                            <td>3000</td>
                            <td>Number of time in milliseconds to wait before closing the message.</td>
                        </tr>
                        <tr>
                            <td>sticky</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether the message should be automatically closed based on life property or kept visible.</td>
                        </tr>
                        <tr>
                            <td>closable</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>When enabled, displays a close icon to hide a message manually.</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Arbitrary object to associate with the message.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <p>A message is displayed using a MessageService, make sure your component has an injectable <i>MessageService</i> defined as a provider otherwise Toast cannot be utilized.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;
</app-code>
       
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';
import &#123;MessageService&#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './my.component.html'
&#125;)
export class MyComponent &#123;
    
    constructor(private messageService: MessageService) &#123;&#125;
    
    addSingle() &#123;
        this.messageService.add(&#123;severity:'success', summary:'Service Message', detail:'Via MessageService'&#125;);
    &#125;
    
    addMultiple() &#123;
        this.messageService.addAll([&#123;severity:'success', summary:'Service Message', detail:'Via MessageService'&#125;,
                                    &#123;severity:'info', summary:'Info Message', detail:'Via MessageService'&#125;]);
    &#125;
    
    clear() &#123;
        this.messageService.clear();
    &#125;
&#125;
</app-code>

            <h5>Positions</h5>
            <p>Toast supports various positions where default is "top-right".</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast position="top-left"&gt;&lt;/p-toast&gt;
</app-code>

            <p>Valid values of the position property would be;</p>
            <ul>
                <li>top-right</li>
                <li>top-left</li>
                <li>bottom-right</li>
                <li>bottom-left</li>
                <li>top-center</li>
                <li>bottom-center</li>
                <li>center</li>
            </ul>

            <h5>Targeting Messages</h5>
            <p>A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the <i>key</i> property so that toast and the message can match.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast key="myKey1"&gt;&lt;/p-toast&gt;
&lt;p-toast key="myKey2"&gt;&lt;/p-toast&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
this.messageService.add(&#123;key: 'myKey1', severity:'success', summary: 'Summary Text', detail: 'Detail Text'&#125;);
this.messageService.add(&#123;key: 'myKey2', severity:'success', summary: 'Summary Text', detail: 'Detail Text'&#125;);
</app-code>

            <h5>Clearing Messages</h5>
            <p>Clicking the close icon on the message, removes it manually. Same can also be achieved programmatically using the clear function of the message service. Calling it without
                any arguments, removes all displayed messages whereas calling it with a key, removes the messages displayed on a toast having the same key.
            </p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast key="myKey1"&gt;&lt;/p-toast&gt;
&lt;p-toast key="myKey2"&gt;&lt;/p-toast&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
this.messageService.clear();            //clears messages of both toast components
this.messageService.clear('myKey1');    //clears messages of the first toast only
</app-code>

            <h5>Templating</h5>
            <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast position="center" key="c" (onClose)="onReject()" [baseZIndex]="5000"&gt;
    &lt;ng-template let-message pTemplate="message"&gt;
        &lt;div class="p-flex p-flex-column" style="flex: 1"&gt;
            &lt;div class="p-text-center"&gt;
                &lt;i class="pi pi-exclamation-triangle" style="font-size: 3rem"&gt;&lt;/i&gt;
                &lt;h4&gt;&#123;&#123;message.summary&#125;&#125;&lt;/h4&gt;
                &lt;p&gt;&#123;&#123;message.detail&#125;&#125;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="p-grid p-fluid"&gt;
                &lt;div class="p-col-6"&gt;
                    &lt;button type="button" pButton (click)="onConfirm()" label="Yes" class="p-button-success"&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="p-col-6"&gt;
                    &lt;button type="button" pButton (click)="onReject()" label="No" class="p-button-secondary"&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-toast&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the animations can be customized using the <i>showTransitionOptions</i>, <i>hideTransitionOptions</i>, <i>showTransformOptions</i> and <i>hideTransformOptions</i> properties, 
                example below disables the animations altogether.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"&gt;&lt;/p-toast&gt;
</app-code>

            <p>Another example is customizing the animation to appear from left to right.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast [showTransformOptions]="'translateX(100%)'"&gt;&lt;/p-toast&gt;
</app-code>
            
            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>key</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Key to match the key of a message to display.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>position</td>
                            <td>string</td>
                            <td>top-right</td>
                            <td>Position of the component, valid values are "top-right", "top-left", "bottom-left", "bottom-right", "top-center, "bottom-center" and "center".</td>
                        </tr>
                        <tr>
                            <td>baseZIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Base zIndex value to use in layering.</td>
                        </tr>
                        <tr>
                            <td>autoZIndex</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to automatically manage layering.</td>
                        </tr>
                        <tr>
                            <td>showTransitionOptions</td>
                            <td>string</td>
                            <td>300ms ease-out</td>
                            <td>Transition options of the show animation.</td>
                        </tr>
                        <tr>
                            <td>hideTransitionOptions</td>
                            <td>string</td>
                            <td>250ms ease-in</td>
                            <td>Transition options of the hide animation.</td>
                        </tr>
                        <tr>
                            <td>showTransformOptions</td>
                            <td>string</td>
                            <td>translateY(100%)</td>
                            <td>Transform options of the show animation.</td>
                        </tr>
                        <tr>
                            <td>hideTransformOptions</td>
                            <td>string</td>
                            <td>translateY(-100%)</td>
                            <td>Transform options of the hide animation.</td>
                        </tr>
                        <tr>
                            <td>preventOpenDuplicates</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>It does not add the new message if there is already a toast displayed with the same content</td>
                        </tr>
                        <tr>
                            <td>preventDuplicates</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Displays only once a message with the same content.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onClose</td>
                            <td>event.message: Removed message</td>
                            <td>Callback to invoke when a message is closed.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-toast</td>
                            <td>Main container element.</td>
                        </tr>
                        <tr>
                            <td>p-toast-message</td>
                            <td>Container of a message item.</td>
                        </tr>
                        <tr>
                            <td>p-toast-icon-close</td>
                            <td>Close icon of a message.</td>
                        </tr>
                        <tr>
                            <td>p-toast-icon</td>
                            <td>Severity icon.</td>
                        </tr>
                        <tr>
                            <td>p-toast-message-content</td>
                            <td>Container of message texts.</td>
                        </tr>
                        <tr>
                            <td>p-toast-title</td>
                            <td>Summary of the message.</td>
                        </tr>
                        <tr>
                            <td>p-toast-title</td>
                            <td>Detail of the message.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/toast" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-toast-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;
&lt;p-toast position="top-left" key="tl"&gt;&lt;/p-toast&gt;
&lt;p-toast position="top-center" key="tc"&gt;&lt;/p-toast&gt;
&lt;p-toast position="bottom-center" key="bc"&gt;&lt;/p-toast&gt;

&lt;p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000"&gt;
    &lt;ng-template let-message pTemplate="message"&gt;
        &lt;div class="p-flex p-flex-column" style="flex: 1"&gt;
            &lt;div class="p-text-center"&gt;
                &lt;i class="pi pi-exclamation-triangle" style="font-size: 3rem"&gt;&lt;/i&gt;
                &lt;h4&gt;&#123;&#123;message.summary&#125;&#125;&lt;/h4&gt;
                &lt;p&gt;&#123;&#123;message.detail&#125;&#125;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="p-grid p-fluid"&gt;
                &lt;div class="p-col-6"&gt;
                    &lt;button type="button" pButton (click)="onConfirm()" label="Yes" class="p-button-success"&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="p-col-6"&gt;
                    &lt;button type="button" pButton (click)="onReject()" label="No" class="p-button-secondary"&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-toast&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Severities&lt;/h5&gt;
    &lt;button type="button" pButton pRipple (click)="showSuccess()" label="Success" class="p-button-success"&gt;&lt;/button&gt;
    &lt;button type="button" pButton pRipple (click)="showInfo()" label="Info" class="p-button-info"&gt;&lt;/button&gt;
    &lt;button type="button" pButton pRipple (click)="showWarn()" label="Warn" class="p-button-warning"&gt;&lt;/button&gt;
    &lt;button type="button" pButton pRipple (click)="showError()" label="Error" class="p-button-danger"&gt;&lt;/button&gt;

    &lt;h5&gt;Positions&lt;/h5&gt;
    &lt;button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"&gt;&lt;/button&gt;
    &lt;button type="button" pButton pRipple (click)="showTopCenter()" label="Top Center" class="p-button-warning"&gt;&lt;/button&gt;
    &lt;button type="button" pButton pRipple (click)="showBottomCenter()" label="Bottom Center" class="p-button-success"&gt;&lt;/button&gt;
    
    &lt;h5&gt;Multiple&lt;/h5&gt;
    &lt;button type="button" pButton pRipple (click)="showMultiple()" label="Multiple" class="p-button-warning"&gt;&lt;/button&gt;
    &lt;button type="button" pButton pRipple (click)="showSticky()" label="Sticky"&gt;&lt;/button&gt;

    &lt;h5&gt;Clear&lt;/h5&gt;
    &lt;button type="button" pButton pRipple (click)="clear()" icon="pi pi-times" label="Clear"&gt;&lt;/button&gt;

    &lt;h5&gt;Template&lt;/h5&gt;
    &lt;button type="button" pButton pRipple (click)="showConfirm()" label="Confirm" class="ui-button-warning"&gt;&lt;/button&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';
import &#123;MessageService&#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './toastdemo.html',
    styleUrls: ['./toastdemo.scss'],
    providers: [MessageService]
    
&#125;)
export class ToastDemo &#123;

    constructor(private messageService: MessageService) &#123;&#125;

    showSuccess() &#123;
        this.messageService.add(&#123;severity:'success', summary: 'Success', detail: 'Message Content'&#125;);
    &#125;

    showInfo() &#123;
        this.messageService.add(&#123;severity:'info', summary: 'Info', detail: 'Message Content'&#125;);
    &#125;

    showWarn() &#123;
        this.messageService.add(&#123;severity:'warn', summary: 'Warn', detail: 'Message Content'&#125;);
    &#125;

    showError() &#123;
        this.messageService.add(&#123;severity:'error', summary: 'Error', detail: 'Message Content'&#125;);
    &#125;

    showTopLeft() &#123;
        this.messageService.add(&#123;key: 'tl', severity:'info', summary: 'Info', detail: 'Message Content'&#125;);
    &#125;

    showTopCenter() &#123;
        this.messageService.add(&#123;key: 'tc', severity:'info', summary: 'Info', detail: 'Message Content'&#125;);
    &#125;

    showBottomCenter() &#123;
        this.messageService.add(&#123;key: 'bc', severity:'info', summary: 'Info', detail: 'Message Content'&#125;);
    &#125;

    showConfirm() &#123;
        this.messageService.clear();
        this.messageService.add(&#123;key: 'c', sticky: true, severity:'warn', summary:'Are you sure?', detail:'Confirm to proceed'&#125;);
    &#125;

    showMultiple() &#123;
        this.messageService.addAll([
            &#123;severity:'info', summary:'Message 1', detail:'Message Content'&#125;,
            &#123;severity:'info', summary:'Message 2', detail:'Message Content'&#125;,
            &#123;severity:'info', summary:'Message 3', detail:'Message Content'&#125;
        ]);
    &#125;

    showSticky() &#123;
        this.messageService.add(&#123;severity:'info', summary: 'Sticky', detail: 'Message Content', sticky: true&#125;);
    &#125;

    onConfirm() &#123;
        this.messageService.clear('c');
    &#125;

    onReject() &#123;
        this.messageService.clear('c');
    &#125;
    
    clear() &#123;
        this.messageService.clear();
    &#125;
&#125;
</app-code>
<app-code ngNonBindable ngPreserveWhitespaces>
button &#123;
    min-width: 10rem;
    margin-right: .5rem;
&#125;

@media screen and (max-width: 960px) &#123;
    button &#123;
        width: 100%;
        margin-bottom: .5rem;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-toast-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
